<template>
    <div>
        <!-- 卡片视图 -->
        <el-card>
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="输入菜单名进行搜索" v-model="queryInfo.query" clearable @clear="getMenuList">
                        <template #append>
                            <el-button icon="Search" @click="getMenuList"></el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="16">
                    <el-button type="primary" @click="showDialog(null)">添加菜单</el-button>
                </el-col>
            </el-row>
            <!-- stripe隔行变色 -->

            <el-table :data="menuList" :border="true" stripe style="width:100%" row-key="id">
                <el-table-column type="selection" width="55" />
                <el-table-column label="菜单名称" prop="name" width="180px"></el-table-column>
                <el-table-column label="组件" prop="component" width="180px"></el-table-column>
                <el-table-column label="路径" prop="path" width="180px"></el-table-column>
                <el-table-column label="排序" prop="orderNum" width="180px"></el-table-column>

                <el-table-column label="操作" min-width="180px">
                    <template #default="scope">
                        <el-button type="primary" size="small" icon="Edit" @click="showDialog(scope.row)">编辑</el-button>

                        <el-popconfirm width="280" icon="Delete" icon-color="#626AEF" :title="popTitle"
                            @confirm="confirmDelete(scope.row)">
                            <template #reference>
                                <el-button type="danger" @click="openPop(scope.row)" icon="Delete"
                            size="small">Delete</el-button>

                    </template>
                    <template #actions="{ confirm, cancel }">
                        <el-button @click="cancel">取消</el-button>
                        <el-button type="danger" @click="confirm">
                            确定
                        </el-button>
                    </template>
                    </el-popconfirm>
</template>
</el-table-column>
</el-table>

<!-- 添加/修改菜单的对话框 -->
<el-dialog :title=dialogTitle v-model="dialogVisible" @close="dialogClose" width="30%">
    <!-- 主体 -->
    <el-form :model="dialogForm" ref="dialogRef" label-width="70px">
        <el-form-item label="菜单名称" prop="name">
            <el-input v-model="dialogForm.name"></el-input>
        </el-form-item>
        <el-form-item label="访问路径" prop="path">
            <el-input v-model="dialogForm.path"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentId">
            <el-tree-select v-model="dialogForm.parentId" :data="menuList" check-strictly :render-after-expand="false"
                :props="defaultProps" @change="selectChange" />
        </el-form-item>
        <el-form-item label="前端组件" prop="component">
            <el-input v-model="dialogForm.component"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
            <el-input-number v-model="dialogForm.orderNum" :min="1" size="small" controls-position="right" />
        </el-form-item>
        
    </el-form>

    <!--底部  -->
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="oprateMenu">确 定</el-button>
    </span>
</el-dialog>

</el-card>



</div>
</template>

<script setup>
import axios from 'axios'
import { ref, reactive, nextTick, getCurrentInstance, onMounted, computed } from 'vue';
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance()
let menuList = ref()
let queryInfo = reactive({})
let selectData = reactive([])
let dialogTitle = ref()
let dialogVisible = ref(false)
let dialogForm = ref({})
let dialogRef = ref()
const defaultProps = ref({
    children: 'children',
    label: 'name',
    value: 'id'
})

let popTitle = ref()

function openPop(menu) {
    console.log('menu//////////', menu)
    if (menu.children) {
        popTitle.value = "此操作会永久删除此菜单以及包含的所有子菜单，是否继续？"
    }
    else {
        popTitle.value = "永久删除此菜单，是否继续？"
    }
}
const getMenuList = async () => {
    const { data: res } = await proxy.$http.get("/menu/getList", {
        params: queryInfo,
    });
    console.log('res', res);
    if (res.code == 200) {
        menuList.value = res.data;
    }
}
const showDialog = (menu) => {
    computeOrder()//计算排序
    dialogVisible.value = true;
    nextTick(() => {
        if (menu) {
            dialogForm.value = menu
        }
    })


}

async function oprateMenu() {
    let url
    if (dialogForm.value.id) {
        url = "/menu/editMenu"
    }
    else url = "/menu/addMenu"
    const { data: res } = await axios.post(
        url,
        dialogForm.value
    );

    if (res.code) {
        getMenuList()
    }
    dialogVisible.value = false;

}

async function confirmDelete(menu){
    const { data: res } = await axios.post(
        '/menu/deleteMenu',
        menu
    );

    if (res.code) {
        getMenuList()
    }
}

const selectChange = (val) => {
    computeOrder()
}
//后续查看jeecg中的排序逻辑，菜单递归显示

onMounted(() => { 
    getMenuList()
})

function computeOrder() {
    let orderNumArray = []
    if (dialogForm.value.parentId) {
        menuList.value.map((e) => {

            if (e.id == dialogForm.value.parentId) {
                if (e.children) {
                    return e.children.map((c) => {
                        orderNumArray.push(c.orderNum)
                    })
                }


            }

        })
    }
    else {
        orderNumArray = menuList.value.map(val => {
            return val.orderNum
        })
    }
    console.log('order', orderNumArray)
    dialogForm.value.orderNum = Math.max(...orderNumArray) + 1
}
function dialogClose() {
    dialogRef.value.resetFields()
}




</script>
<style lang="less" scoped></style>